<template>

    <el-container style="height: 83vh;">
        <el-header class="sa-header">
            <div class="sa-title sa-flex sa-row-between">
                <div class="label sa-flex">
                    <span class="left">商家申请管理</span>
                    <search-condition :conditionLabel="filterParams.conditionLabel"
                        @deleteFilter="deleteFilter"></search-condition>
                </div>
                <div>
                    <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
                    <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
                </div>
            </div>
        </el-header>

        <el-main class="sa-p-0" v-loading="table.loading">
            <el-table class="sa-table" height="100%" :data="table.data" stripe>
                <template #empty>
                    <sa-empty />
                </template>
                <el-table-column sortable="custom" prop="id" label="ID" min-width="80" />
                <el-table-column prop="user.nickname" label="申请用户" min-width="180" align="center">
                    <template #default="scope">
                        <div class="sa-flex sa-row-center sa-col-center">
                            <sa-user-profile :isHover="false" :user="scope.row.user" :id="scope.row.user_id" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="申请姓名" min-width="150" align="center" />
                <el-table-column prop="mobile" label="联系手机号" min-width="120" align="center" />
                <el-table-column label="申请时间" min-width="180" prop="create_time" align="center"></el-table-column>
                <el-table-column label="申请服务" min-width="200" prop="serve_text" align="center" show-overflow-tooltip />
                <el-table-column label="邀请上级" min-width="150" prop="inviter_name" align="center"></el-table-column>
                <el-table-column label="审核状态" min-width="220" align="center">
                    <template #default="scope">
                        <div
                            :class="{ 'success': scope.row.status === 1, 'fail': scope.row.status === 2, 'ing': scope.row.status === 0 }">
                            {{ calcStatus(scope.row) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="驳回理由" min-width="250" prop="remark" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button v-auth="'seller.admin.application.audit'" class="is-link" type="primary"
                            @click="audit(scope.row)" v-if="scope.row.status === 0">审核
                        </el-button>
                        <el-button v-auth="'seller.admin.application.details'" class="is-link" type="primary"
                            @click="see(scope.row)" v-if="scope.row.status === 1 || scope.row.status === 2">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <sa-view-bar>
            <template #right>
                <sa-pagination :pageData="pageData" @updateFn="getData" />
            </template>
        </sa-view-bar>
    </el-container>

</template>
<script>
export default {
    name: 'seller.admin.application',
};
</script>

<script setup>
import { onMounted, reactive } from 'vue';
import { api } from '../merchant.service';
import { usePagination, useModal } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';
import { useRoute } from 'vue-router';
import details from './details.vue';
import _ from 'lodash';

const props = defineProps({
    serve: {
        type: Number,
        default: 1,
    }
})

const statusList = [
    { name: '全部', type: 'all' },
    { name: '待审核', type: '0' },
    { name: '审核通过', type: '1' },
    { name: '审核驳回', type: '2' }];

const route = useRoute();
const emit = defineEmits(['modalCallBack']);

const filterParams = reactive({
    tools: {
        user: {
            type: 'tinputprepend',
            placeholder: '请输入查询内容',
            field: 'user',
            user: {
                field: 'user.nickname',
                value: '',
            },
            options: [
                {
                    label: '用户昵称',
                    value: 'user.nickname',
                },
                {
                    label: '用户ID',
                    value: 'user.id',
                },
                {
                    label: '手机号',
                    value: 'user.mobile',
                },
            ],
        },

        audit: {
            type: 'tselect',
            label: '审核状态',
            field: 'audit',
            value: '',
            options: {
                data: [
                    {
                        label: '全部',
                        value: 'all',
                    },
                    {
                        label: '待审核',
                        value: '0',
                    },
                    {
                        label: '审核通过',
                        value: '1',
                    },
                    {
                        label: '审核驳回',
                        value: '2',
                    },
                ],
            },
        },
        create_time: {
            type: 'tdatetimerange',
            label: '申请时间',
            field: 'create_time',
            value: route.query.create_time || [],
            create_time: route.query.create_time || [],
        },
    },
    data: {
        audit: 'all',
        user: { field: 'user.nickname', value: '' },
        create_time: route.query.create_time || [],
    },
    conditionLabel: {},
});

const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

const table = reactive({
    loading: false,
    data: [],
});

const { pageData } = usePagination();

const calcStatus = (row) => {
    if (row.status === 0) return '待审核';
    if (row.status === 1) return '已审核';
    if (row.status === 2) return '已驳回';
};

async function getData(page) {
    table.loading = true;
    if (page) pageData.page = page;
    let tempSearch = _.cloneDeep(filterParams.data);
    tempSearch.serve = props.serve;
    let search = composeFilter(tempSearch, {
        'user.nickname': 'like',
        'user.id': 'like',
        create_time: 'range',
        serve: 'like',
    });

    if (!_.isEmpty(search)) {
        if (_.includes(search.search, 'audit')) {
            search.search = _.replace(search.search, /audit/, 'status');
        }
    }
    console.log('search:', search);
    const { error, data } = await api.application.list({
        page: pageData.page,
        list_rows: pageData.list_rows,
        ...search,
    });
    if (error === 0) {
        table.data = data.data;
        pageData.page = data.current_page;
        pageData.list_rows = data.per_page;
        pageData.total = data.total;
    }
    table.loading = false;
}

//审核
const audit = (data) => {
    useModal(
        details,
        {
            title: '审核',
            id: data.id,
        },
        {
            confirm: () => {
                getData();
            },
        },
    );
};

const see = (item) => {
    useModal(
        details,
        {
            title: '申请详情',
            id: item.id,
        },
        {
            confirm: () => {
                getData();
            },
        },
    );
};

onMounted(() => {
    console.log('props.serve:',props.serve);
    getData();
});

</script>
<style>
.success {
    color: #67C23A;
}

.fail {
    color: #FA5151;
}

.ing {
    color: #FFC300;
}
</style>